<div layout="row" layout-align="start center">
  <div hide-xs class="mat-subtitle-1 pad-left pad-right push-bottom-none">
    Chart Theme:
  </div>
  <mat-form-field>
    <mat-select
      [(value)]="selectedTheme"
      (valueChange)="selectChartTheme($event)"
    >
      <mat-option *ngFor="let theme of themes" [value]="theme">
        {{ theme }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
<td-chart [style.height.px]="600" [themeName]="themeSelector.selected$ | async">
  <td-chart-tooltip [trigger]="'item'">
    <ng-template let-params let-ticket="ticket" tdTooltipFormatter>
      <ng-container *ngIf="params">
        <div layout="row" layout-align="start center">
          <mat-icon class="push-right-sm">
            <span class="tc-blue-300">info</span>
          </mat-icon>
          <span>{{ params.name }}</span>
        </div>
      </ng-container>
    </ng-template>
  </td-chart-tooltip>
  <td-chart-series
    td-treemap
    [top]="'10%'"
    [left]="'10%'"
    [bottom]="'10%'"
    [right]="'10%'"
    [data]="[
      {
        value: 40,
        name: 'Accessibility',
        path: 'Accessibility'
      },
      {
        value: 180,
        name: 'Accounts',
        path: 'Accounts',
        children: [
          {
            value: 76,
            name: 'Access',
            path: 'Accounts/Access',
            children: [
              {
                value: 12,
                name: 'DefaultAccessPlugin.bundle',
                path: 'Accounts/Access/DefaultAccessPlugin.bundle'
              },
              {
                value: 28,
                name: 'FacebookAccessPlugin.bundle',
                path: 'Accounts/Access/FacebookAccessPlugin.bundle'
              },
              {
                value: 20,
                name: 'LinkedInAccessPlugin.bundle',
                path: 'Accounts/Access/LinkedInAccessPlugin.bundle'
              },
              {
                value: 16,
                name: 'TencentWeiboAccessPlugin.bundle',
                path: 'Accounts/Access/TencentWeiboAccessPlugin.bundle'
              }
            ]
          },
          {
            value: 92,
            name: 'Authentication',
            path: 'Accounts/Authentication',
            children: [
              {
                value: 24,
                name: 'FacebookAuthenticationPlugin.bundle',
                path: 'Accounts/Authentication/FacebookAuthenticationPlugin.bundle'
              },
              {
                value: 16,
                name: 'LinkedInAuthenticationPlugin.bundle',
                path: 'Accounts/Authentication/LinkedInAuthenticationPlugin.bundle'
              },
              {
                value: 20,
                name: 'TencentWeiboAuthenticationPlugin.bundle',
                path: 'Accounts/Authentication/TencentWeiboAuthenticationPlugin.bundle'
              },
              {
                value: 16,
                name: 'TwitterAuthenticationPlugin.bundle',
                path: 'Accounts/Authentication/TwitterAuthenticationPlugin.bundle'
              },
              {
                value: 16,
                name: 'WeiboAuthenticationPlugin.bundle',
                path: 'Accounts/Authentication/WeiboAuthenticationPlugin.bundle'
              }
            ]
          },
          {
            value: 12,
            name: 'Notification',
            path: 'Accounts/Notification',
            children: [
              {
                value: 12,
                name: 'SPAAccountsNotificationPlugin.bundle',
                path: 'Accounts/Notification/SPAAccountsNotificationPlugin.bundle'
              }
            ]
          }
        ]
      },
      {
        value: 1904,
        name: 'AddressBook Plug-Ins',
        path: 'AddressBook Plug-Ins',
        children: [
          {
            value: 744,
            name: 'CardDAVPlugin.sourcebundle',
            path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle',
            children: [
              {
                value: 744,
                name: 'Contents',
                path: 'AddressBook Plug-Ins/CardDAVPlugin.sourcebundle/Contents'
              }
            ]
          },
          {
            value: 28,
            name: 'DirectoryServices.sourcebundle',
            path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle',
            children: [
              {
                value: 28,
                name: 'Contents',
                path: 'AddressBook Plug-Ins/DirectoryServices.sourcebundle/Contents'
              }
            ]
          },
          {
            value: 680,
            name: 'Exchange.sourcebundle',
            path: 'AddressBook Plug-Ins/Exchange.sourcebundle',
            children: [
              {
                value: 680,
                name: 'Contents',
                path: 'AddressBook Plug-Ins/Exchange.sourcebundle/Contents'
              }
            ]
          },
          {
            value: 432,
            name: 'LDAP.sourcebundle',
            path: 'AddressBook Plug-Ins/LDAP.sourcebundle',
            children: [
              {
                value: 432,
                name: 'Contents',
                path: 'AddressBook Plug-Ins/LDAP.sourcebundle/Contents'
              }
            ]
          },
          {
            value: 20,
            name: 'LocalSource.sourcebundle',
            path: 'AddressBook Plug-Ins/LocalSource.sourcebundle',
            children: [
              {
                value: 20,
                name: 'Contents',
                path: 'AddressBook Plug-Ins/LocalSource.sourcebundle/Contents'
              }
            ]
          }
        ]
      }
    ]"
    [visibleMin]="300"
    [label]="{
      show: true,
      formatter: '{b}'
    }"
    [leafDepth]="2"
    [levels]="[
      { itemStyle: { normal: { borderWidth: 0, gapWidth: 5 } } },
      { itemStyle: { normal: { gapWidth: 1 } } },
      {
        colorSaturation: [0.35, 0.5],
        itemStyle: { normal: { gapWidth: 1, borderColorSaturation: 0.6 } }
      }
    ]"
  ></td-chart-series>
</td-chart>
